<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { findTop6Views, findTop6Collects, type StoryItem } from '../api/story';

const currentTab = ref('hot');
const stories = ref<StoryItem[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);

const fetchHotStories = async () => {
  try {
    loading.value = true;
    error.value = null;
    const response = await findTop6Views();
    stories.value = response.data.data;
  } catch (e) {
    error.value = '获取热门故事失败';
    console.error('Failed to fetch hot stories:', e);
  } finally {
    loading.value = false;
  }
};

const fetchFavoriteStories = async () => {
  try {
    loading.value = true;
    error.value = null;
    const response = await findTop6Collects();
    stories.value = response.data.data;
  } catch (e) {
    error.value = '获取最多收藏故事失败';
    console.error('Failed to fetch favorite stories:', e);
  } finally {
    loading.value = false;
  }
};

const handleTabChange = async (tab: string) => {
  currentTab.value = tab;
  if (tab === 'hot') {
    await fetchHotStories();
  } else if (tab === 'favorite') {
    await fetchFavoriteStories();
  }
};

onMounted(() => {
  fetchHotStories();
});
</script>

<template>
  <div class="container mx-auto px-2 py-8">
    <!-- 排行榜分类 -->
    <div class="flex space-x-4 mb-6 justify-center">
      <button 
        :class="['px-2 py-2 rounded-full text-sm font-medium', 
                currentTab === 'hot' ? 'bg-purple-600 text-white' : 'bg-white/80 text-gray-600']"
        @click="handleTabChange('hot')"
      >热门阅读</button>
      <button 
        :class="['px-2 py-2 rounded-full text-sm font-medium',
                currentTab === 'favorite' ? 'bg-purple-600 text-white' : 'bg-white/80 text-gray-600']"
        @click="handleTabChange('favorite')"
      >最多收藏</button>
      <button 
        :class="['px-2 py-2 rounded-full text-sm font-medium',
                currentTab === 'new' ? 'bg-purple-600 text-white' : 'bg-white/80 text-gray-600']"
        @click="currentTab = 'new'"
      >最新发布</button>
    </div>

    <!-- 排行榜列表 -->
    <div class="space-y-4">
      <div class="min-h-[480px] relative">
        <div class="grid grid-cols-1 gap-4">
          <template v-if="loading">
            <div v-for="i in 6" :key="i" class="bg-white/80 backdrop-blur-md rounded-2xl p-2 shadow-lg flex items-center space-x-1 animate-pulse">
              <div class="w-10 h-10 rounded-full bg-gray-200 flex-shrink-0"></div>
              <div class="w-20 h-20 rounded-xl bg-gray-200 flex-shrink-0"></div>
              <div class="flex-1 space-y-2">
                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                <div class="flex items-center space-x-6">
                  <div class="h-4 bg-gray-200 rounded w-16"></div>
                  <div class="h-4 bg-gray-200 rounded w-16"></div>
                </div>
              </div>
              <div class="w-6 h-6 bg-gray-200 rounded-full flex-shrink-0"></div>
            </div>
          </template>
          <template v-else>
            <div v-for="(story, index) in stories" :key="story.id" 
              class="bg-white/80 backdrop-blur-md rounded-2xl p-2 shadow-lg flex items-center space-x-1 cursor-pointer hover:bg-white/90 transition-all duration-300 ease-in-out"
              @click="$router.push(`/story/${story.id}`)">
              <div class="text-xl font-bold text-purple-600 w-10 flex-shrink-0">{{ index + 1 }}</div>
              <img :src="story.thumbnail" :alt="story.name" class="w-20 h-20 rounded-xl object-cover flex-shrink-0">
              <div class="flex-1 space-x-2 min-w-0 flex justify-between flex-col">
                <h3 class="font-semibold text-xs mb-2 truncate">{{ story.name }}</h3>
                <div class="flex items-center text-sm text-gray-600 space-x-6 text-right">
                  <span class="flex items-center">
                    <img src="https://unpkg.com/lucide-static@latest/icons/eye.svg" class="w-4 h-4 mr-1" alt="浏览">
                    {{ story.views }}
                  </span>
                  <span class="flex items-center">
                    <img src="https://unpkg.com/lucide-static@latest/icons/bookmark.svg" class="w-4 h-4 mr-1" alt="收藏">
                    {{ story.collects }}
                  </span>
                </div>
              </div>
              <img src="https://unpkg.com/lucide-static@latest/icons/chevron-right.svg" class="w-6 h-6 text-gray-400 flex-shrink-0" alt="查看详情">
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>